<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">

    <head>
        <meta charset="utf-8">
        <title>
            权限列表
        </title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" th:href="@{/assets/admin/css/font.css}">
        <link rel="stylesheet" th:href="@{/assets/admin/css/xadmin.css}">
        <script th:src="@{/assets/admin/lib/layui/layui.js}" charset="utf-8"></script>
        <script type="text/javascript" th:src="@{/assets/admin/js/xadmin.js}"></script>
        <!--[if lt IE 9]>
        <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
        <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
        <input type="hidden" th:value="${roleId == null ?'':roleId}" id="roleId">
        <div class="x-body">
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div id="permission_tree">
                        </div>
                    </div>
                    <div class="layui-card-body" style="text-align: center">
                        <button class="layui-btn" onclick="submint()">
                            <i class="layui-icon">&#xe642;</i>修改
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </body>
    <script th:replace="systemCommon/HarinCommon :: commonJs"></script>
    <script>
        layui.use(["tree", 'jquery'], function () {
            $ = layui.jquery;//jquery
            tree = layui.tree;
            //permission的tree参数
            permission_obj = {
                elem: '#permission_tree',
                data: null,
                id: 'demoId',            //唯一标识
                showCheckbox: true,      //是否显示复选框
                onlyIconControl: true,    //有单击事件，所以这个应该关闭
                showLine: false,           //是否开启连接线。默认 true，若设为 false，则节点左侧出现三角图标。
                text: {
                    defaultNodeName: '未命名',     //节点默认名称
                    none: '无数据'                 //数据为空时的提示文本
                },
                click: function (obj) {
                    var checks = tree.getChecked('demoId');//被勾选上的数组
                    let filter = checks.filter((item)=>{
                        item.id == obj.data.id
                    });
                    //let disabled = "disabled";
                    tree.setCheckedNon("demoId",parseInt(obj.data.id));
                    //tree.setChecked('demoId',parseInt(obj.data.id));
                }
            }
            //加载菜单目录
            getData();
        });

        /*获取后台的菜单数据*/
        function getData() {
            let roleId = $("#roleId").val();
            layui.use(['tree'], function () {
                tree = layui.tree;
                $.ajax({
                    url: "/permission/getPermissionByRoleId",    //后台数据请求地址  获取所有的菜单目录，并获取当前角色所绑定的菜单
                    type: "get",
                    data:{
                        "spread":true,
                        "check":false,
                        "roleId":roleId
                    },
                    async: false,
                    success: function (resut) {
                        res_data = resut.result;
                        permission_obj.data = res_data;
                        tree.render(permission_obj);
                    }
                });
            });
        }

        function submint(){
            let roleId = $("#roleId").val();
            //获取勾选上的数据
            let checkedId = new Array();
            let checked = tree.getChecked("demoId");
            //先遍历一级目录
            checked.map((item,index) =>{
                //checkedId.push(item.id);
                //获取二级目录
                item.children.forEach((item, index) => {
                    checkedId.push(item.id);
                });
            });
            $.ajax({
                url: "/permission/updateRolePermission",
                type:"post",
                data:{
                    "roleId":roleId,
                    "checkedPermissions":checkedId
                },
                success:function(data){
                    if (data.code == 200) {
                        layer.alert(data.message, {icon: 6}, function () {
                            // 获得frame索引
                            var index = parent.layer.getFrameIndex(window.name);
                            //关闭当前frame
                            parent.layer.close(index);
                        });
                    } else {
                        layer.alert(data.message, {icon: 5}, function () {
                            // 获得frame索引
                            var index = parent.layer.getFrameIndex(window.name);
                            //关闭当前frame
                            parent.layer.close(index);
                        });
                    }
                }

            })
        }
    </script>
</html>